<template>
  <div id="daiying">
    <div class="bg">
      <p>近期最受期待</p>
      <div class="most-expected-list">
        <div class="mov">
          <div class="like" v-for="i in comming" :key="i.id">
            <div class="daiying-like">
              <div class="daiying-like-img1" >
                <img
                  src="https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/notWish.png"
                  alt=""
                />
              </div>
              <img :src="i.img" alt="" class="daiying-like-img2" />
            </div>
            <div class="ming">
              <strong>{{ i.nm }}</strong>
              <span>{{ i.comingTitle }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="daiying-con">
      <div v-for="(item, key) in daiying" :key="key" class="daiying-con-key">
        <div class="key">{{ key }}</div>
        <ul>
          <li v-for="i in item" :key="i.id">
            <img :src="i.img" alt="" />
            <div class="daiying-con-nm">
              <h3>{{ i.nm }}</h3>
              <p>
                <span>{{ i.wish }}</span> 人想看
              </p>
              <p>主演：{{ i.star }}</p>
              <p v-if="i.showst == 4">{{ i.showInfo }}</p>
              <p v-else>暂无放映</p>

              <button
                v-if="i.showst == 4"
                :style="`background-color: ${i.showStateButton.color}`"
              >
                {{ i.showStateButton.content }}
              </button>
              <button
                v-if="i.showst == 1"
                disabled="true"
                style="background-color: rgb(184, 183, 183)"
              >
                禁售
              </button>
            </div>
          </li>
        </ul>
      </div>
      <div class="kkk"></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "daiying",
  data() {
    return {
      comming: [],
      daiying: [],
    };
  },
  mounted() {
    //近期最受期待
    axios.get("comming.json").then((res) => {
      res.data.coming.forEach((item) => {
        item.img = item.img.replace("w.h", "128.180");
        // let arr = []
        let str = "";
        item.comingTitle = item.comingTitle.split("");
        for (let i = 0; i < item.comingTitle.length - 3; i++) {
          // arr.push(item.comingTitle[i])
          str += item.comingTitle[i];
        }
        item.comingTitle = str;
      });
      this.comming = res.data.coming;
    });

    //content
    axios.get("daiying.json").then((res) => {
      console.log(res);
      console.log(res.data.coming);
      let Arr = res.data.coming;
      var coming = {}; //组装完的数组
      Arr.forEach((item) => {
        item.img = item.img.replace("w.h", "128.180");
        if (coming[item.comingTitle]) {
          coming[item.comingTitle].push(item);
        } else {
          coming[item.comingTitle] = [];
          coming[item.comingTitle].push(item);
        }
      });
      this.daiying = coming;
      console.log(this.daiying);
    });
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#daiying {
  width: 100%;
  margin-top: 4rem;
  background-color: rgb(221, 221, 221);
  overflow: hidden;
}
#daiying .kkk {
  height: 1.866667rem;
}
#daiying .bg {
  background-color: white;
}
#daiying .bg p {
  padding-top: .4rem;
  padding-left: .4rem;
  font-size: 0.38rem;
}
#daiying .bg .most-expected-list {
  width: 9.546667rem;
  height: 4.88rem;
  overflow: auto;
  overflow-y: hidden;
  margin-left: .133333rem;
}

#daiying .bg .most-expected-list .mov {
  display: flex;
  justify-content: space-between;
  margin: .266667rem;
}
#daiying .bg .most-expected-list .mov .like .daiying-like{
  position: relative;
}
#daiying .bg .most-expected-list .mov .like .daiying-like .daiying-like-img2{
  width: 2.266667rem;
  height: 3.066667rem;
  margin-right: .266667rem; 
}
#daiying .bg .most-expected-list .mov .like .daiying-like .daiying-like-img1{
  background-color: black;
  width: .56rem;
  height: .56rem;
  text-align: center;
  line-height: .56rem;
  border-radius: 0 0 .266667rem 0;
  position: absolute;
}
#daiying .bg .most-expected-list .mov .like .daiying-like .daiying-like-img1 img{
  width: .3rem;
  height: .3rem;
}

#daiying .bg .most-expected-list .mov .like .ming strong {
  display: inline-block;
  width: 2.133333rem;
  height: .48rem;
  font-size: 0.26rem;
  color: #222;
  margin: 0 0 0.06rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#daiying .bg .most-expected-list .mov .like .ming span {
  display: block;
}

#daiying .daiying-con {
  width: 100%;
  background-color: white;
}
#daiying .daiying-con .daiying-con-key {
  margin-top: .266667rem;
  margin-left: .4rem;
  display: block;
}
#daiying .daiying-con .daiying-con-key .key {
  font-size: .426667rem;
  padding-top: .426667rem;
}
#daiying .daiying-con .daiying-con-key ul {
  width: 100%;
  list-style: none;
}
#daiying .daiying-con .daiying-con-key ul li {
  display: flex;
  position: relative;
}
#daiying .daiying-con .daiying-con-key ul li img {
  width: 1.706667rem;
  height: 2.4rem;
  margin-top: 18px;
}
#daiying .daiying-con .daiying-con-key ul li .daiying-con-nm {
  height: 2.933333rem;
  width: 12.8rem;
  margin-top: .4rem;
  margin-left: .213333rem;
  border-bottom: .026667rem solid rgb(221, 220, 220);
}

#daiying .daiying-con .daiying-con-key ul li .daiying-con-nm h3 {
  color: #333;
  font-size: .453333rem;
  font-family: fantasy;
  padding-top: .08rem;
}
#daiying .daiying-con .daiying-con-key ul li .daiying-con-nm p {
  font-size: .373333rem;
  color: #666;
  margin-top: .106667rem;
}

#daiying .daiying-con .daiying-con-key ul li button {
  height: 0.8rem;
  width: 1.52rem;
  border-radius: .48rem;
  border-style: none;
  color: white;
  position: absolute;
  right: .266667rem;
  top: 1.066667rem;
  font-size: .346667rem;
}
</style>